<!-- 实体店主页 -->
<template>
	<app-layout>
		<!-- 登录 -->
	<!-- 	<app-user-login v-if="isGuest" @click="cek"></app-user-login> -->
		<!-- 10.26 弹窗 珠宝店价格 -->
		<movable-area class="movable">
			<movable-view @click="jump('/pages/store/transfer/transfer')" class="movable-item" direction="all" x="750"
				y="962rpx" :inertia="true">
				<image :lazy-load="true" class="quick" mode="widthFix"
					:src="imgprefix + '/web/uploads/tasklist/valueflo.jpg?time=' + time"></image>
			</movable-view>
		</movable-area>
		<view class="sixheader">
			<view class="six flex">
				<!-- <view class="left-arrow" @click="back">
					<image class="left-arrow" src="/static/image/icon/arrow-left.png" mode=""></image>
				</view> -->
				<view class="flex">
					<!-- :class="videoid == item.id ? 'active' : ''" -->
					<view class="item" v-for="(item,index) in videolist" :key="index" @click="tolist(item)">
						{{item.title}}
					</view>
					<view class="item" @click="jump(activity.url)" v-if="activity.status == 1">
						活动
					</view>
					<view class="item" @click="jump('/pages/user-center/storeidqr/storeidqr?mall_id='+mall_id)">
						推广
					</view>
				</view>
			</view>
			<view class="six">
				<view class="flex" @click="search">
					<view class="sitem">
						<image class="seaimg" src="/static/image/icon/icon-search.png" mode=""></image>
					</view>
					<view class="sitem fitem">
						搜索
					</view>
					<!-- <view class="sitem fitem" @click="release">
						转发
					</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="sixheader">
			<view class="six flex">
				<view class="left-arrow">
					<image class="left-arrow"
						src="https://ceshi.senmainet.com/web/wechatstatic/static/image/icon/arrow-left.png" mode="">
					</image>
				</view>
				<view class="flex">
					<view class="item" :class="videoid == item.id ? 'active' : ''" v-for="(item,index) in videolist"
						:key="index">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="six">
				<view class="flex" @click="search">
					<view class="sitem">
						<image class="seaimg" src="../../static/image/icon/icon-search.png"></image>
					</view>
					<view class="sitem fitem">
						搜索
					</view>
				</view>
			</view>
		</view> -->
		<view class="subscribe" :style="{'background-image': 'url(' + detailimg + ')'}">
			<view class="">
				<!-- {{detailname}} -->
			</view>
			<view class="addsubnum">
				订阅数{{fansnum}}
			</view>
			<view class="addbox" v-if="isubscribe">
				<view class="addsubsc">
					已订阅
				</view>
			</view>
			<view class="addbox" @click="subsuc(1)" v-else>
				<view class="addsubsc">
					+订阅
				</view>
				<!-- <view class="">
					送20金币
				</view> -->
			</view>
		</view>
		<view class="live" :style="videostyle" @click="tozhibo" v-if="livelist.length > 0">
			<view class="">
				<view class="">
					<video v-if="videourl != '' && videourl != null" class="livebro" :style="videostyle" autoplay loop
						:controls="false" muted :enable-progress-gesture="false" :src="videourl"
						object-fit="cover"></video>
					<!-- 11.16 多视频拼接（珠宝店主） -->
					<view class="" v-else-if="videospurl.length > 0">
						<video class="livebro" :src="videospurl[videocidx]" :style="videostyle" autoplay loop
							:controls="false" muted :enable-progress-gesture="false" object-fit="cover" @ended="ends" />
					</view>
					<image v-else class="livebro" :src="livelist[liveid].icon_url" mode="aspectFill"></image>
				</view>
				<view class="livestyle" v-if="linktype == 1">
					<view class="">
						点击查看直播
					</view>
				</view>
				<view class="linkstyle" v-if="linktype == 1">
					<view v-if="linkdata.live_status === 101" class="tag-box tag-box-3">
						<view class="text">
							<image class="live-icon" src="/static/image/icon/liveing.png"></image>
							<span>{{linkdata.status_text}}</span>
						</view>
					</view>
					<!--预告-->
					<view v-else-if="linkdata.live_status === 102" class="tag-box tag-box-1">
						<view class="text">
							<view class="round"></view>
							<span>{{linkdata.status_text}}</span>
						</view>
						<view class="text-time">{{linkdata.text_time}}</view>
					</view>
					<view v-else-if="linkdata.live_status === 103" class="tag-box tag-box-2">
						<view class="text">
							<view class="round"></view>
							<span>{{linkdata.status_text}}</span>
						</view>
					</view>
					<view v-else class="tag-box tag-box-3">
						<view class="text">
							<view class="round"></view>
							<span>{{linkdata.status_text}}</span>
						</view>
					</view>
				</view>
				<view class="scrollupdown">
					<view class="comment">
						<view class="rota">
							<swiper class="rota-swiper" display-multiple-items="3" :autoplay="true" :interval="3000"
								:duration="1000" :circular="true" :vertical="true">
								<swiper-item v-for="(item,index) in avaterimg" :key="index" class="">
									<view class="swiper-item cross-center rota-item">
										<!-- <image class="imgag" :src="item.useravatar" mode=""></image> -->
										{{item.username}}
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="commodity" v-if="videogoods.length > 0">
						<view class="scroll">
							<swiper autoplay class="scroll-view" interval="2000" circular :vertical="true"
								disable-touch>
								<swiper-item v-for="(item,index) in videogoods" :key="index">
									<view class="item-good dir-left-nowrap">
										<view class="image-view cover-pic">
											<image class="" :lazy-load="true" :src="item.cover_pic || item.cover_img">
											</image>
											<view class="no-goods" v-if="item.goods_stock == 0 || detail.status == 3">
												已售
											</view>
										</view>
										<view class="content dir-top-nowrap main-between">
											<view class="name t-omit">{{item.name}}</view>
											<view class="pri-but dir-left-nowrap main-between cross-bottom">
												<view class="pri">
													<!-- <text class="price"
														:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{item.price}}</text> -->
													<view class="subtitle">去实体店体验</view>
												</view>
												<!-- <view class="button" v-if="item.goods_stock == 0 || detail.status == 3">
													已售
												</view>
												<view class="button" @click="shopDetail(item)" v-else>查看详情</view> -->
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="">
				<givethe :dzStyle="dzStyle" ref="givedz"></givethe>
			</view> -->
			<!-- <view class="heart">
				<image class="image" src="/static/image/icon/icon-favorite-active.png" mode=""></image>
			</view> -->
			<!-- <view class="praise" v-if="opacity == 0">
				<canvas canvas-id="bubble" :style="'width:' + width + 'rpx;height:' + height + 'rpx'"
					class="like-fx"></canvas>
				<givethe :dzStyle="dzStyle" ref="givedz"></givethe>
			</view> -->
			<!-- <view class="praise">
				<giveigft :throttle="100" :large="2" ref="givedz"></giveigft>
			</view> -->
		</view>
		<view class="trian" v-if="livelist.length > 0" @touchstart="coverTouchStart" @touchmove="coverTouchMove"
			@touchend="coverTouchEnd" @tap="tozhibo"
			:style="'transform:' + coverTransform + ';transition:' + coverTransition+';height:' + trainheight + ';'">
			<!-- <view class="line"></view> -->
			<text class="text">下拉查看直播</text>
		</view>
		<view class="navstyle" style="">
			<!-- 190-20 -->
			<app-navigation-icon nextMargin="96rpx" :autoplay="false" navHeight="200" navMargin="20rpx auto"
				:navs="navs" background="#f7f7f7" :scroll="true" :columns="3" :imgStyle="imgstyle2" :rows="2">
			</app-navigation-icon>
		</view>
		<!-- 联动轮播 -->
		<view class="bannershop">
			<scroll-view :scroll-into-view="'banclasify'+banid" scroll-with-animation scroll-x
				class="app-scroll cross-center">
				<view class="app-item" :id="'banclasify'+index" v-for="(item,index) in banner_navs" :key="index"
					:class="index==banid ? 'active' : ''" @click="change(index)">
					{{item.name}}
				</view>
			</scroll-view>
			<swiper :current="banid" class="banner-swiper" autoplay circular :interval="8000" :duration="1000"
				@change="swichange">
				<swiper-item class="banner-swiper-item" v-for="(item,index) in banner_navs" :key="index">
					<view class='activity'>
						<view class='assemble'>
							<!-- 9.22 修改为 轮播图 -->
							<swiper class="swiper" autoplay circular :interval="2000" @change="smswic">
								<swiper-item v-for="(items,indexs) in item.subnav" :key="indexs" v-if="indexs > 1">
									<!-- <app-jump-button form :url="items.url"> -->
									<image :src="items.icon_url" class="slide-image" />
									<!-- </app-jump-button> -->
								</swiper-item>
							</swiper>
						</view>
						<view class="assemble fixed">
							<app-jump-button form :url="item.subnav[smswicid].url"></app-jump-button>
						</view>
						<view class='listR'>
							<view class="listRt" v-for="(items,indexs) in item.subnav" :key="indexs" v-if="indexs < 2">
								<app-jump-button form :url="items.url">
									<image :lazy-load="true" :src="items.icon_url" class="slide-image" />
								</app-jump-button>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图 -->
		<!-- <view v-if="banners.length > 0" class="moturnover">
			<app-swiper :list="banners" borderRadius="32" mode="rect" name="icon_url" :height="242" :autoplay="true">
			</app-swiper>
		</view> -->
		<!-- <view class="whole" @click="jump('/pages/entity/complaint')">
			在双熙堂品牌下，此主播卖的是真货，在其他地方卖的不能保障，双熙堂不负责
		</view> -->
		<!-- 在双熙堂品牌下，此主播卖的是真货，在其他地方卖的不能保障，双熙堂不负责 -->
		<view class="whole" v-if="genuine.length > 0" @click="jump(genuine[0].url)">
			<image class="imagexs" :src="genuine[0].icon_url" mode="widthFix"></image>
		</view>
		<!-- 新品珠宝最先抢,买家秀 -->
		<view class="dichotomy1" v-if="entity.length > 0">
			<view class="dichotomy1-one" v-for="(item,index) in entity" :key="index" @click="jump(item.url)">
				<image :src="item.icon_url" mode=""></image>
			</view>
		</view>
		<!-- 直播好货快快抢视频带货 -->
		<view class="moturnover" v-if="lvglist.length > 0">
			<view class="moturnover-item">
				<image :src="item.icon_url" v-for="(item,index) in lvglist" :key="index" v-if="index < 2"
					@click="jump(item.url)" mode="widthFix"></image>
			</view>
			<view class="moturnover-bottom" v-for="(item,index) in lvglist" :key="index" v-if="index == 2"
				@click="jump(item.url)">
				<image :src="item.icon_url" mode="widthFix"></image>
			</view>
		</view>
		<!-- <app-navigation-icon nextMargin="80rpx" :autoplay="false" navHeight="270" navMargin="20rpx auto"
			:navs="navs" background="#f7f7f7" :scroll="true" :columns="3" :imgStyle="imgstyle2" :rows="1">
		</app-navigation-icon> -->
		<view class="navs-banner" v-if="banners.length > 0">
			<app-swiper effect3d effect3dPreviousMargin="152" effect3dNextMargin="152" :list="banners"
				:itemStyle="itemStyle" borderRadius="0" mode="rect" name="icon_url" :height="465" :autoplay="true">
			</app-swiper>
			<view class="left-tips">
				左滑查看更多</view>
		</view>
		<view class="fanshot" v-if="fansdata.length > 0">
			<view class="fantitle">
				粉丝热搜
			</view>
			<view class="faname">
				<view class="fan-item" v-if="fansdata.length > 0">
					<swiper class="fan-swiper" display-multiple-items="4" :autoplay="true" :interval="0"
						:duration="4000" :circular="true">
						<swiper-item v-for="(item,index) in fansdata" :key="index" class="" v-if="index < 10">
							<view class="fan-item-item" :class="item.params.describe != '' ? 'active':''"
								@click="toplat(item.url)">
								{{item.name}}
							</view>
						</swiper-item>
					</swiper>
					<!-- <swiper class="fan-swiper" :display-multiple-items="mulitems" :autoplay="false" :interval="0"
						:duration="4000" :circular="true">
						<swiper-item v-for="(item,index) in fansdata" :key="index" :style="{width:mulwidth}"
							class="fan-swiper-item" v-if="index < 10">
							<view class="fan-item-item" @click="toplat(item.url)">
								{{item.name}}
							</view>
						</swiper-item>
					</swiper> -->
					<!-- <view class="fan-item-item-name" v-for="(item,index) in fansdata" :key="index" v-if="index < 10">
						{{item.name}}
					</view> -->
				</view>
				<view class="fan-item" v-if="fansdata.length > 10">
					<swiper class="fan-swiper" display-multiple-items="4" :autoplay="true" :interval="0"
						:duration="3000" :circular="true">
						<swiper-item v-for="(item,index) in fansdata" :key="index" class=""
							v-if="index > 10 && index < 20">
							<view class="fan-item-item" @click="toplat(item.url)">
								{{item.name}}
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="fan-item" v-if="fansdata.length > 20">
					<swiper class="fan-swiper" display-multiple-items="4" :autoplay="true" :interval="0"
						:duration="2800" :circular="true">
						<swiper-item v-for="(item,index) in fansdata" :key="index" class="" v-if="index > 20">
							<view class="fan-item-item" @click="toplat(item.url)">
								{{item.name}}
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 需改成瀑布流 -->
		<!-- <view class="dir-left-nowrap cross-top moreshop" style="width: 708rpx;">
			<view class="uodown">
				<view class="dir-left-nowrap cross-center uodown-item" v-for="(item,index) in goods_list" :key="index"
					@click="toshopdetail(item.page_url)">
					<image style="width: 120rpx;height: 120rpx;" :src="item.cover_pic" mode="center">
					</image>
				</view>
			</view>
		</view> -->
		<!-- <view class="list-one">
			<view class="list-one-item" v-for="(child,childindex) in goods_list" :key="childindex"
				@click="toshopdetail(child.page_url)">
				<image class="image" :src="child.cover_pic" mode=""></image>
				<text class="u-line-2">{{child.name}}</text>
			</view>
		</view> -->

		<view class="" style="margin: 24rpx 0;">
			<u-indexware :value="goods_list"></u-indexware>
		</view>

		<!-- <view class="dir-left-nowrap cross-top moreshop" style="width: 708rpx;">
			<view class="uodown">
				<view class="dir-left-nowrap cross-center uodown-item" v-for="(item,index) in goods_list" :key="index"
					@click="toshopdetail(item.page_url)">
					<image style="width: 120rpx;height: 120rpx;" :src="item.cover_pic" mode="center">
					</image>
					<view class="shop" style="flex: 1;">
						<view class="name">
							{{item.name || item.title}}
						</view>
						<view class="price">
							价格
						</view>
					</view>
					<view class="more">
						更多>>>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 固定导航栏 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 80rpx" v-if="opacity == 1">
			<view class="" v-for="(item,index) in fixnavs" :key="index" v-if="index > 0">
				<app-jump-button @btclick="btclick"
					:url="item.url.indexOf('?') != -1 ? item.url + '&mall_id=' + mall_id : item.url + '?mall_id=' + mall_id">
					<view class="">
						<image :lazy-load="true" class="quick-btn" :src="item.icon_url"></image>
						<view class="quick-text">{{item.name}}</view>
					</view>
				</app-jump-button>
			</view>
		</view>
		<!-- 可滑动图标 -->
		<view class="">
			<tastlist :autos="false" flotop="360rpx" floleft="0" ref="task"></tastlist>
		</view>	
	
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import applayout from "../../components//basic-component/app-layout/app-layout.vue"
	import AppUserLogin from "../../components/basic-component/app-layout/app-user-login/app-user-login.vue"
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import uIndexware from '../../components/page-component/u-goods-list/u-indexware.vue';
	import tastlist from '../../pages/tasklist/tasklist.vue'
	const base64 = require('../../utils/base64.js');
	let trigger = 0
	let triggerend = 0
	export default {
		components: {
			appNavigationIcon,
			appSwiper,
			uIndexware,
			tastlist,
			"app-layout":applayout,
			"app-user-login":AppUserLogin
		},
		data() {
			return {
				imgprefix: this.$siteInfo.imgroot,
				time: new Date().getTime(),
				// 11.29
				mall_id: 0,

				videolist: [{
						id: 0,
						title: '推荐'
					},
					{
						id: 1,
						title: '新品珠宝最先抢'
					},
				],
				videoid: 0,
				activity: '',
				videostyle: '',
				avaterimg: [],
				detail: '',
				dzStyle: "",
				animation_timer: null, // 动画定时器
				width: "200",
				height: "360",
				navs: [],

				livelist: [],
				liveid: 0,
				videogoods: [],
				videourl: '',
				videospurl: [],
				videocidx: 0,
				// 根据链接查询的数据
				linktype: 0,
				linkdata: '',

				banners: [],
				banner_navs: [],
				/* banner_navs: [{
						id: 200,
						name: '一元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							}
						]
					},
					{
						id: 201,
						name: '74元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechatupload.shuangxitang.cn/uploads/mall1/202112/20211221/1fc8715d38f64e0bd26988d8a651b986.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechatupload.shuangxitang.cn/uploads/mall1/202112/20211221/1fc8715d38f64e0bd26988d8a651b986.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechatupload.shuangxitang.cn/uploads/mall1/202112/20211221/1fc8715d38f64e0bd26988d8a651b986.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechatupload.shuangxitang.cn/uploads/mall1/202112/20211221/1fc8715d38f64e0bd26988d8a651b986.jpg'
							}
						]
					},
					{
						id: 202,
						name: '58元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							}
						]
					},
					{
						id: 203,
						name: '857元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechatupload.shuangxitang.cn/uploads/mall1/202112/20211221/1fc8715d38f64e0bd26988d8a651b986.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechatupload.shuangxitang.cn/uploads/mall1/202112/20211221/1fc8715d38f64e0bd26988d8a651b986.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							}
						]
					},
					{
						id: 204,
						name: '58558元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							}
						]
					},
					{
						id: 210,
						name: '5727元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							}
						]
					},
					{
						id: 252,
						name: '85868元买黄金',
						subnav: [{
								name: 'name1',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name2',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							},
							{
								name: 'name3',
								icon_url: 'https://wechat.shuangxitang.cn/web/uploads/mall3/202112/20211222/ee56ff6d2fd02c27930d11a635ace256.jpg'
							}
						]
					}
				], */
				banid: 0,
				// 真货
				genuine: [],
				entity: [],
				lvglist: [],
				goods_list: [],
				page: 1,
				page_count: 1,
				// 粉丝热搜
				mulitems: 3,
				mulwidth: '10rpx',
				fansdata: [],

				// imgstyle2: "width: 120rpx;height: 120rpx",
				imgstyle2: "width: 192rpx;height: 150rpx",
				imgstyle3: "width: 200rpx;height: 200rpx",
				itemStyle: "width: 357rpx;height: 465rpx",

				// 返回顶部
				top: 280,
				scrollTop: 0,
				opacity: 0,
				keywords: '',
				//原始坐标
				startY: 0,
				//当前元素的状态（是否移动）
				moving: false,
				//元素的移动
				coverTransform: 'translateY(0px)',
				//动画效果
				coverTransition: '0s',
				// 是否下拉
				isdropdown: false,
				trainheight: '48rpx',

				// 12.7
				entdetail: '',
				detailname: '',
				detailimg: '',
				fansnum: 0,

				// 是否订阅成功
				isubscribe: false,

				// 12.15固定导航栏
				fixnavs: [], // 固定导航数据

				smswicid: 2, // 大轮播内的小轮播

				lowestid: 0

			}
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
			token:{
				handler(newval,oldval){
					if(newval!== null ){
						this.oneofReq("option3")
						this.oneofReq("option5")
					}
				},
				deep:true
			}
		
		},
		computed: {
			// 登录
			isGuest() {
				// console.log("我是登录组件2")
				console.log(this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
				return this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null;
				
			},
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				storemall: state => state.malid.apimaUrl,
				token: state=>state.user.accessToken
			}),
		},
		onPageScroll(e) {
			// console.log(e);
			this.scrollTop = e.scrollTop;
			// let scrollTop = e.scrollTop / (uni.upx2px(100) / 100)
			// let height = 560
			// let fixre = ''
			// if (scrollTop > 280) {
			// 	height = 280
			// 	fixre = 'position:fixed;top:280rpx;z-index:1'
			// } else {
			// 	// height = 560 - scrollTop
			// 	// fixre = 'position:fixed;top:280rpx;z-index:1'
			// }
			// this.videostyle = `height:${height}rpx;transition:transform .2s linear;${fixre}`
		},
		onLoad(options) {
			// 11.29
			// console.log(options);
			if (options.mall_id) {
				this.mall_id = options.mall_id
			} else if (options.scene) {
				let params = decodeURIComponent(options.scene)
				let purl = this.$utils.urlParamsToObject(params)
				this.mall_id = purl.mall_id
			} else {
				this.mall_id = 1
			}
			this.$store.dispatch('malid/actionSetMallId', this.mall_id)

			// 获取实体店详情
			this.loadDetail()
			// 判断是否订阅
			this.subsuc(2)
			// 实体店统一导航
			this.allReq(34);
			// console.log(options,'onloadkeyh');
			this.oneofReq("option3")
			this.oneofReq("option5")
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		 
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/entity/index',
				params: {
					mall_id: this.mall_id
				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/pages/entity/index',
				params: {
					mall_id: this.mall_id
				}
			});
		},
		onShow() {
			// this.likeAnimation();
			
		},
		onUnload() {
			// this.$refs.givedz.clearint()
			clearInterval(this.animation_timer)
		},
		onHide() {
			// this.$refs.givedz.clearint()
			clearInterval(this.animation_timer)
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.allLiveReq(this.lowestid)
			}
		},
		methods: {
			
			cek() {
				this.$emit('cek');
			},
			back() {
				uni.navigateBack({
					delta: '1'
				})
			},
			search() {
				uni.navigateTo({
					url: '/pages/search/search?mall_id=' + this.mall_id
				})
			},
			// 切换banner+图片 内的banner
			smswic(e) {
				this.smswicid = e.detail.current + 2
			},
			// 切换banner+图片
			swichange(e) {
				// console.log(e);
				this.banid = e.detail.current
			},
			change(item) {
				this.banid = item
				// console.log(this.banid);
			},
			btclick(item) {
				let url = item
				if (url.indexOf('?') != -1) {
					url = url + '&mall_id=' + this.mall_id
				} else {
					url = url + '?mall_id=' + this.mall_id
				}

				uni.navigateTo({
					url: url
				})
			},
			// 实体店详情 只获取名字
			loadDetail() {
				let url = this.storemall.entity.detail
				this.$request({
					url: url,
					data: {
						id: this.mall_id
					}
				}).then(res => {
					if (res.code == 0) {
						// console.log(res);
						this.entdetail = res.data.detail
						this.detailname = res.data.detail.name
						this.fansnum = Number(this.entdetail.fans_num) + Number(this.entdetail.params.fans_num)
						this.detailimg = res.data.detail.catlink.option2.cateinfo[0].icon_url
						this.activity = res.data.detail.catlink.option4.pcateinfo
						// console.log(this.detailimg);
						uni.setNavigationBarTitle({
							title: this.detailname
						})
						// 谁谁谁购买了
						this.storeupdown()
						// 好货快快抢的商品
						// this.initDetail()
					}
				})
			},
			// type = 2 判断是否订阅 type = 1 发送订阅请求
			subsuc(type = 1) {
				// console.log(type, '------------');
				// console.log(this.storemall);
				let url = this.storemall.entity.subscribe
				// console.log(url);
				let fodata = {
					mch_id: 0,
					mall_id: this.mall_id,
				}
				this.$request({
					url: url,
					data: {
						formdata: JSON.stringify(fodata),
						type: type
					},
					method: 'post'
				}).then(res => {
					if (type == 1) {
						if (res.code == 0) {
							this.isubscribe = true
							this.fansnum = this.fansnum + 1
						}
					} else if (type == 2) {
						if (res.msg == '关注成功') {
							this.isubscribe = true
						} else {
							this.isubscribe = false
						}
					}
				})
			},
			// 实体店每个模块的内容
			oneofReq(keyword) {
				// console.log('keyeoword');
				this.$request({
					url: this.storemall.entity.navague,
					data: {
						keyword: keyword,
						status: 1
					}
				}).then(res => {
					// console.log(res,'oneofReq实体店模块内容');
					if (keyword == 'option3') {
						// console.log('option3');
						this.livelist = res.data.list[0].subnav
						this.genuine = res.data.list[1].subnav
						this.entity = res.data.list[2].subnav
						this.lvglist = res.data.list[3].subnav
						this.banners = res.data.list[4].subnav
						this.banners.forEach(item => {
							if (item.url.indexOf('?') != -1) {
								item.url = item.url + '&mall_id=' + this.mall_id
							} else {
								item.url = item.url + '?mall_id=' + this.mall_id
							}
						})
						// console.log(this.livelist[this.liveid].url);
						if (this.livelist.length > 0) {
							this.checkPlink()
						}
						
						// this.goods_list = res.data.list[5].subnav
						this.lowestid = res.data.list[5].id
						this.allLiveReq(this.lowestid)
						// this.livelist.forEach((item, index) => {
						// 	let nas = "navs" + (index + 1)
						// 	this.data.navs
						// 	console.log(this.data.navs);
						// 	// console.log(this.navs + (index + 1))
						// 	// this.navs + (index + 1) = item
						// 	// this.navs + index = item
						// })
						// console.log(this.navs1);
						// console.log(res)
						// this.request()
					}
					if (keyword == 'option5') {
						// console.log('option5');
						// console.log(res);
						this.banner_navs = res.data.list
					}
				})
			},
			// 根据链接查数据
			checkPlink() {
				let carryurl = this.livelist[this.liveid].url
				if (carryurl == '' || carryurl == 'javascript:;' || carryurl == '/') {
					return
				}
				let curl = base64.encode(carryurl)
				this.$request({
					url: this.$api.entity.pagelink,
					data: {
						pageurl: curl
					}
				}).then(res => {
					this.linktype = res.pagetype
					this.linkdata = res.data
					if (res.pagetype == 1) {
						this.videogoods = res.data.goods
						if (this.liveid == this.livelist.length - 1) {
							return;
						}
						if (res.data.live_status == 103) {
							this.liveid = this.liveid + 1
							this.checkPlink()
						}
					} else if (res.pagetype == 2) {
						this.videogoods = res.data.detail.goodslist
						if (res.data.detail.url != '') {
							this.videourl = res.data.detail.url
						}
						if (this.liveid == this.livelist.length - 1) {
							return;
						}
						let status = this.listJump(res.data.detail.goodslist, res.data.detail.start_at, res.data
							.detail.end_at)
						if (status == 3) {
							this.liveid = this.liveid + 1
							this.checkPlink()
						}
					} else {
						this.videogoods = res.data.goodslist.goodlist
						// console.log(res.data.goodslist.videourl.length, res.data.goodslist.videourl, 8888888);
						if (res.data.url != '') {
							this.videourl = res.data.url
						} else if (res.data.goodslist.videourl.length > 0 && res.data.goodslist.videourl.some(
								item => {
									return item != ''
								})) {
							this.videospurl = res.data.goodslist.videourl
						}
						if (this.liveid == this.livelist.length - 1) {
							return;
						}
						if (this.videogoods.every(item => {
								return item.goods_stock == 0
							})) {
							this.liveid = this.liveid + 1
							this.checkPlink()
						}
					}
				})
			},
			listJump(list, stime, etime) {
				// 当前时间
				let catime = new Date()
				// 开始时间
				let satime = new Date(stime.replaceAll('-', '/'))
				// 结束时间
				let eatime = new Date(etime.replaceAll('-', '/'))

				if (satime > catime) {
					this.sup_status = 1
				} else if (satime <= catime && catime < eatime) {
					let salist = []
					salist = list.filter((itm, index) => {
						return itm.goods_stock != 0
					})
					if (salist.length == 0) {
						this.sup_status = 3
					} else {
						this.sup_status = 2
					}
				} else if (catime >= eatime) {
					this.sup_status = 3
				}
				return this.sup_status
			},
			// 11.16 拼接视频播放
			ends(e) {
				let videourl = this.videospurl.filter((item) => {
					return item != ''
				})
				if (videourl.length > 1) {
					if (this.videocidx < videourl.length - 1) {
						this.videocidx++
					} else {
						this.videocidx = 0
					}
				}
			},
			// 11.29
			toshopdetail(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('?') != -1) {
					url = item + '&mall_id=' + this.mall_id
				} else {
					url = item + '?mall_id=' + this.mall_id
				}
				uni.navigateTo({
					url: url
				})
			},
			jump(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('?') != -1) {
					url = item + '&mall_id=' + this.mall_id
				} else {
					url = item + '?mall_id=' + this.mall_id
				}
				if (item.indexOf('/pages/gospeed/index') != -1 || item == '/pages/index/index' || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: url
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			toplat(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('/pages/gospeed/index') != -1 || item == '/pages/index/index' || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: url
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			tolist(item) {
				if (item.id == 0) {
					return
				} else if (item.id == 1) {
					let url = '/pages/goods/list?cat_id=0&title=新品珠宝最先抢&mall_id=' + this.mall_id
					uni.navigateTo({
						url: url
					})
				}
			},
			// 下拉进入直播页面
			coverTouchStart(e) {
				//滑动开始 记录目标原始坐标
				this.startY = e.touches[0].clientY
				this.coverTransition = 'transform .2s linear'
				this.isdropdown = true
				trigger = 0
				triggerend = 0
				// console.log('start');
			},
			coverTouchMove(e) {
				// console.log(e);
				// console.log(e.stopPropagation);
				// console.log(e.preventDefault);
				if (this.isdropdown) {
					//滑动中
					let moveY = e.touches[0].clientY; //记录移动的坐标
					let startY = this.startY;
					let moveDistance = moveY - startY; //计算当前坐标与原始坐标的差
					if (moveDistance < 0) {
						//如果小于0 不做操作
						this.moving = false
						return;
					}
					this.moving = true
					// console.log(152451);
					// uni.navigateTo({
					// 	url: '/pages/entity/city'
					// })uni.upx2px(moveDistance)

					if (moveDistance >= 42) {
						//如果差在该区间内
						moveDistance = 42;
						trigger++;
						// console.log(trigger);
						if (trigger == 1) {
							this.isdropdown = false
							triggerend++
							// console.log(this.isdropdown);
							// console.log('-------------');
							// this.moving == true
							// // console.log(trigger);
							// this.coverTouchEnd()
							// setTimeout(()=>{
							// 	uni.navigateTo({
							// 		url: '/pages/entity/city'
							// 	})
							// },300)

						}
					}
					if (moveDistance > 0 && moveDistance <= 42) {
						this.coverTransform = `translateY(${moveDistance}px)`
					}
					let height = 560 + moveDistance / (uni.upx2px(100) / 100)
					// let height = 560 + moveDistance
					this.videostyle = `height:${height}rpx`
					let trins = 100 + moveDistance / (uni.upx2px(100) / 100)
					this.trainheight = trins + 'rpx'
				} else {
					if (triggerend == 1) {
						this.coverTouchEnd()
						// uni.navigateTo({
						// 	url: '/pages/entity/city'
						// })
					}
				}

			},
			coverTouchEnd(e) {
				// console.log('end');
				// this.isdropdown = true
				// trigger = 0
				// console.log(e);
				//滑动结束 回到原始位置
				if (this.moving == false) {
					return;
				}
				// uni.navigateTo({
				// 	url: '/pages/entity/list'
				// })
				// console.log(this.livelist[this.liveid].url);
				uni.navigateTo({
					url: this.livelist[this.liveid].url
				})
				// if (e.target.offsetTop == 450) {
				// 	uni.navigateTo({
				// 		url: '/pages/entity/city'
				// 	})
				// }
				this.coverTransform = 'translateY(0px)'
				// console.log(this.coverTransform);
				this.moving = false
				// console.log(this.moving);
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
				// console.log(this.coverTransition);
				this.videostyle = `height:560rpx`
				this.trainheight = '100rpx'
				// console.log(this.videostyle);
				// console.log('*********');
			},
			tozhibo() {
				let url = this.livelist[this.liveid].url
				if (url == '/' || url == 'javascript:;' || url == '') {
					return
				}
				if (url.indexOf('/pages/gospeed/index') != -1 || url == '/pages/index/index' || url ==
					'/pages/sixty/index' || url == '/pages/user-center/user-center' || url == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: url
					})
					return
				}
				// console.log(this.liveid);
				uni.navigateTo({
					url: url
				})
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			allLiveReq(pid) {
				this.$request({
					url: this.storemall.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 10,
						page: this.page
					}
				}).then((res) => {
					if (res.code == 0) {
						this.goods_list = this.goods_list.concat(res.data.list)
						this.page_count = res.data.pagination.page_count
					}
				}).catch(() => {

				})
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 50
					}
				}).then((res) => {
					if (res.code == 0) {
						if (pid == 34) {
							this.navs = res.data.list
							// 实体店统一固定导航
							this.allReq(15);
							this.allReq(35);
						} else if (pid == 15) {
							this.fixnavs = res.data.list
						} else if (pid == 35) {
							this.fansdata = res.data.list
							// const query = uni.createSelectorQuery().in(this);
							// query.selectAll('.fan-item').context(data => {
							// 	console.log(data);
							// }).exec();
						}
					}
				}).catch(() => {

				})
			},
			likeAnimation() {
				this.animation_timer = setInterval(() => {
					// this.$refs.givedz.likeClick()
					this.$refs.givedz.handleClick()
				}, 300)
			},
			storeupdown() {
				this.$request({
					url: this.$api.apply.list,
					data: {
						page: 1,
						limit: 5,
						review_status: 1,
						keyword: 'random'
					}
				}).then((res) => {
					this.avaterimg = res.data.list
				}).catch(err => {
					// console.log(err);
				})
			},
			initDetail() {
				this.$request({
					url: this.$api.navs.detail,
					data: {
						id: 83
					}
				}).then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.detail = res.data.detail
					}
				})
			},
			// 11.29
			async request() {
				// this.$showLoading();
				const res = await this.$request({
					url: this.storemall.default.goods_list,
					method: 'get',
					data: {
						page: 1,
						cat_id: 0,
						sort: 1,
						sort_type: 1,
						keyword: '',
						coupon_id: 0,
						sign: '',
						is_sales: 1
					}
				});
				if (res.code === 0) {
					// this.$hideLoading();
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					this.goods_list = this.goods_list.concat(res.data.list)
					if (this.total_count === 0) {
						this.noGoods = true;
					}
				} else {
					// this.$hideLoading();
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	// 10.26 弹窗
	.movable {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 1001;
		width: 750rpx;
		height: 100%;

		.movable-item {
			pointer-events: auto;
			width: 200rpx;
			// height: 200rpx;
			min-height: 96rpx;
		}

		.quick {
			width: 200rpx;
			// height: 200rpx;
		}
	}

	.sixheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: space-between;
		z-index: 666;
		font-size: 28rpx;
		box-shadow: 0 0 20rpx -12rpx black;
		padding: 0 25rpx;

		.left-arrow {
			width: 24rpx;
			// height: 45rpx;
			height: 32rpx;
			margin-right: 24rpx;
		}

		.flex {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 24rpx 0;
			height: 120rpx;

			.sitem {
				height: 72rpx;
				line-height: 72rpx;
				font-size: 28rpx;

				.seaimg {
					width: 36rpx;
					height: 36rpx;
					margin: 18rpx auto;
					// width: 52rpx;
					// height: 52rpx;
					// margin: 10rpx auto;
				}
			}

			.fitem {
				margin-left: 12rpx;
				// margin-left: 20rpx;
				color: #ff2600;
			}

			.item {
				// width: 100rpx;
				height: 72rpx;
				line-height: 72rpx;
				position: relative;
				text-align: center;
				font-size: 28rpx;
				padding: 0 24rpx;
				font-weight: 600;

				&.active:before {
					position: absolute;
					bottom: 0;
					left: 0;
					content: '';
					font-weight: 500;
					background: #342B2A;
					border-radius: 4rpx;
					width: 80rpx;
					left: 50%;
					transform: translateX(-50%);
					height: 8rpx;
				}
			}
		}
	}

	.subscribe {
		// width: 708rpx;
		// height: 224rpx;
		// border-radius: 24rpx;
		width: 750rpx;
		height: 238rpx;
		margin: 120rpx auto 0;
		// margin: 144rpx auto 0;
		display: flex;
		justify-content: flex-end;
		// padding: 24rpx;
		// align-items: center;
		// padding: 24rpx 0;
		color: #ff0000;
		text-align: center;
		font-size: 28rpx;
		background-size: 100% 100%;
		background-color: #FFFFFF;
		border: 2rpx solid #77370b;

		&.subfixed {
			position: fixed;
			background-size: 100% 100%;
			background-color: #353535;
			top: 24rpx;
			left: 21rpx;
			z-index: 9777;
			border-radius: 24rpx;
		}

		.addsubnum {
			font-size: 28rpx;
			font-weight: bold;
			// padding: 14rpx 24rpx;
			padding: 14rpx 0 14rpx 24rpx;
		}

		.addbox {
			padding: 8rpx;
		}

		.addsubsc {
			// border: 1rpx solid #F7F7F7;
			// padding: 6rpx;
			background: #d6d6d6;
			border-radius: 56rpx;
			font-size: 28rpx;
			font-weight: bold;
			padding: 6rpx 24rpx;
		}
	}

	.live {
		// margin-top: 24rpx;
		// margin-top: 280rpx;
		// margin-top: 392rpx;
		width: 750rpx;
		height: 560rpx;
		position: relative;

		.livebro {
			width: 750rpx;
			height: 560rpx;
		}

		.livestyle {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba($color: #777777, $alpha: 0.6);
			color: #FFFFFF;
			padding: 24rpx;
			border-radius: 72rpx;
			line-height: 24rpx;
		}

		.linkstyle {
			position: absolute;
			top: 0;
			width: 520rpx;

			.tag-box {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
			}

			.tag-box-1 {
				.text {
					background: #22ac38;
				}

				.text-time {
					padding: 12#{rpx} 20#{rpx};
					font-size: 24#{rpx};
					color: #fff;
					background: rgba(0, 0, 0, 0.5);
					margin-left: -20rpx;
					border-bottom-right-radius: 30#{rpx};
					border-top-right-radius: 30#{rpx};
					padding-left: 30#{rpx};
				}
			}

			.tag-box-2 {
				.text {
					background: #777777;
				}
			}

			.tag-box-3 {
				.text {
					background: #ff4544;
				}

				.live-icon {
					width: 24#{rpx};
					height: 24#{rpx};
					margin-right: 12#{rpx};
				}
			}

			.round {
				width: 15#{rpx};
				height: 15#{rpx};
				background: #fff;
				border-radius: 50%;
				margin-right: 12#{rpx};
			}

			.text {
				padding: 12#{rpx} 20#{rpx};
				font-size: 26#{rpx};
				// border-top-left-radius: 16#{rpx};
				border-top-right-radius: 30#{rpx};
				border-bottom-right-radius: 30#{rpx};
				z-index: 10;
				color: #fff;
				display: flex;
				align-items: center;
			}
		}

		.scrollupdown {
			position: absolute;
			bottom: 0;
			width: 520rpx;
			z-index: 2;
			// background-color: #F7F7F7;

			.comment {
				height: 86rpx;
				// height: 120rpx;
			}

			.commodity {
				// height: 200rpx;
				height: 112rpx;
			}
		}

		.rota {
			// width: 240rpx;
			// height: 120rpx;
			height: 86rpx;
			z-index: 99;
			// background: rgba(255, 255, 255, 0.5);
			// font-size: 24rpx;
			font-size: 18rpx;
			line-height: 24rpx;
			// line-height: 36rpx;
			// text-align: center;
			// border-radius: 50rpx;
			// box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);

			.rota-swiper {
				// height: 120rpx;
				height: 86rpx;
			}

			.rota-item {
				// height: 36rpx;
				height: 24rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 50rpx;
				// padding: 0 24rpx;
				padding: 0 12rpx;
				box-sizing: border-box;
				display: inline-block;
			}

			.imgag {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50rpx;
				margin: 0 12rpx;
			}
		}

		.scroll {
			width: 375rpx;
		}

		.scroll-view {
			background-color: #ffffff;
			border-radius: 4rpx;
			padding: 8rpx;
			height: 112rpx;
			overflow-x: scroll;

			.item-good {
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {
					position: relative;
				}
			}

			.cover-pic {
				width: 96rpx;
				height: 96rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.3);
					// background-color: rgba($color: #000000, $alpha: 0.5);
					// backdrop-filter: blur(9px);
					margin: 0 auto;
					font-size: 24rpx;
					text-align: center;
					line-height: 96rpx;
					color: #FFFFFF;
					font-weight: bold;

					.no-title {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						background-color: rgba($color: #000000, $alpha: 0.5);
						backdrop-filter: blur(9px);
						font-size: 24rpx;
						text-align: center;
						line-height: 96rpx;
						color: #FFFFFF;
						font-weight: bold;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

			.content {
				padding: 0 8rpx;
			}

			.name {
				font-size: 24rpx;
				color: #303030;
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 18rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}

		.heart {
			position: absolute;
			bottom: 18rpx;
			right: 18rpx;
			z-index: 2;

			.image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.praise {
			position: absolute;
			bottom: 74rpx;
			right: 36rpx;
			z-index: 2;

			.image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.trian {
		text-align: center;
		font-size: 30rpx;
		// line-height: 100rpx;
		// height: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		position: relative;
		// box-shadow: 0 10rpx 100rpx 100rpx #ffffff;

		.line {
			position: absolute;
			height: 4rpx;
			width: 600rpx;
			background: #f4290e;
			top: 50%;
			left: 50%;
			margin-left: -150rpx;
			z-index: -1;
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 24rpx;
			width: 200rpx;
			height: 1rpx;
			background: #f4290e;
		}

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			width: 200rpx;
			height: 1rpx;
			background: #f4290e;
			right: 24rpx;
		}

		.text {
			// background-color: #f2f2f2;
			color: #f4290e;
			// border: 1rpx dotted #f4290e;
			position: relative;
		}
	}

	.navstyle {
		width: 708rpx;
		margin: 24rpx auto;
	}

	.whole {
		width: 100%;
		// height: 120rpx;
		text-align: center;
		line-height: 60rpx;
		padding: 0 24rpx;

		.imagexs {
			width: 100%;
		}
	}

	.moturnover {
		width: 708rpx;
		margin: 24rpx auto;

		.moturnover-item {
			margin: 20rpx auto;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// height: ;
			image {
				width: 352rpx;
			}
		}

		.moturnover-bottom {
			width: 100%;
			margin: 20rpx auto;

			image {
				width: 100%;
			}
		}
	}

	.dichotomy1 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 24rpx 0;
		justify-content: space-around;
		// justify-content: space-between;
		width: 708rpx;
		// background-color: #fff;
		// margin: 0 auto;
		// padding: 24rpx;
		margin: 24rpx auto;

		.dichotomy1-one {
			// width: 50%;
			// height: 216rpx;
			// width: 304rpx;
			// height: 238rpx;
			width: 330rpx;
			height: 258rpx;
			// width: 328rpx;
			// height: 258rpx;
			text-align: center;

			// &+.dichotomy1-one {
			// 	border-left: 1rpx solid;
			// }

			image {
				width: 100%;
				height: 258rpx;
			}
		}
	}

	.navs-banner {
		// width: 708rpx;
		width: 100%;
		margin: 24rpx auto;
		position: relative;
		padding: 24rpx 0;
		background: #FFF;

		.left-tips {
			position: absolute;
			left: 20rpx;
			width: 48rpx;
			height: 274rpx;
			background-color: #77370b;
			border-radius: 8rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			top: 50%;
			transform: translateY(-50%);

			&:after {
				content: '<';
			}
		}
	}

	.fanshot {
		width: 708rpx;
		margin: 24rpx auto;
		padding: 24rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;

		.fantitle {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			padding: 24rpx 0;
		}

		/* .fan-item-item-name {
			background-color: #cbcbcb;
			border-radius: 36rpx;
			padding: 8rpx;
			text-align: center;
			overflow: hidden;
			
			&+.fan-item-item-name {
				margin-left: 32rpx;
			}
		} */

		.faname {
			font-size: 24rpx;
			font-weight: bold;
			// height: 64rpx;
			// width: max-content;
			width: 660rpx;
			overflow: hidden;
			// animation: fansmove 10s linear infinite .6s;
			// animation-play-state: running;

			// transition: opacity .3s .3s;

			.fan-item {
				width: 660rpx;
				height: 64rpx;
				// height: 100%;

				.fan-swiper {
					height: 100%;
				}

				// width: 200%;
				// animation: fansmove 3s linear infinite .6s;
				// animation-play-state: running;
				// position: relative;

				// &:before {
				// 	opacity: 1;
				// }

				// &:first-child::before {
				// 	position: absolute;
				// 	content: "";
				// 	left: 0;
				// 	right: 0;
				// 	top: 0;
				// 	bottom: 0;
				// 	transition: opacity .3s .3s;
				// }
			}

			.fan-item-item {
				background-color: #cbcbcb;
				border-radius: 36rpx;
				// padding: 8rpx;
				padding: 0 8rpx;
				height: 36rpx;
				line-height: 36rpx;
				display: inline-block;
				text-align: center;
				overflow: hidden;
				// width: max-content;
				// overflow: hidden;

				// transform: translate3d(-100%, 0, 0);
				&.active {
					background-color: #000;
					color: #FFF;
				}

				&+.fan-item-item {
					margin-left: 32rpx;
				}
			}

			&+.faname {
				margin-top: 8rpx;
			}
		}
	}

	@keyframes fansmove {
		0% {
			transform: translate3d(0, 0, 0);
		}

		100% {
			transform: translate3d(-100%, 0, 0);
		}
	}

	.moreshop {
		margin: 24rpx 0;

		.uodown {
			flex: 1;
			padding: 0 24rpx;
			font-size: 30rpx;

			.uodown-item {
				&+.uodown-item {
					margin-top: 24rpx;
				}

				.shop {
					margin-left: 24rpx;
				}

				.name {}

				.more {
					font-size: 24rpx;
				}
			}

		}
	}

	// 返回顶部
	// .quick-box {
	// 	position: fixed;
	// 	bottom: #{40rpx};
	// 	right: #{48rpx};
	// 	z-index: 100;
	// 	transition: opacity 0.4s;
	// }

	// .quick-btn {
	// 	width: #{80rpx};
	// 	height: #{80rpx};
	// 	margin-top: #{32rpx};
	// }
	// 固定导航
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;

		overflow: hidden;
		font-size: 24rpx;
		text-align: center;
	}

	.quick-btn {
		width: 70rpx;
		height: 70rpx;
		margin-top: 12rpx;
	}

	.quick-text {
		line-height: 24rpx;
		background: #e9e9e9;
		border-radius: 72rpx;
		padding: 4rpx 6rpx;
		font-weight: bold;
	}

	.list-one {
		width: 708rpx;
		// margin: 0 auto;
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 470rpx;
			font-size: 28rpx;

			.image {
				width: 350rpx;
				height: 360rpx;
			}
		}
	}

	.bannershop {
		width: 708rpx;
		border-radius: 25rpx;
		background-color: #FFFFFF;
		margin: 24rpx auto;
	}

	.app-scroll {
		width: 708rpx;
		height: 48rpx;
		margin: 24rpx auto;
		background-color: #cbcbcb;
		border-radius: 36rpx;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 6rpx 10rpx rgba($color: #000000, $alpha: 0.3) inset;

		.app-item {
			display: inline-block;
			font-size: #{28rpx};
			// margin: 0 24rpx;
			text-align: center;
			color: #353535;
			padding: 0 #{20rpx};
			line-height: 48rpx;
			position: relative;

			&.active {
				background: #000000;
				border-radius: 36rpx;
				color: #FFFFFF;
			}
		}
	}

	.banner-swiper {
		width: 708rpx;
		height: 568rpx;
		margin: 0 auto;

		// background-color: #cbcbcb;
		.banner-swiper-item {
			background-color: #cbcbcb;
			border-radius: 25rpx;
		}
	}

	.activity {
		width: 708rpx;
		margin: 0 auto;
		height: 568rpx;
		display: flex;
		justify-content: space-between;

		.assemble {
			width: 486rpx;
			height: 100%;
			position: relative;

			&.fixed {
				position: absolute;
				top: 0;
				left: 0;
			}

			.swiper {
				width: 486rpx;
				height: 100%;

				.slide-image {
					width: 486rpx;
					height: 100%;
				}
			}

			/* #ifdef MP-WEIXIN */
			.wx-swiper-dot {
				width: 20rpx;
				height: 4rpx;
				border-radius: 2rpx;

				margin-left: -6rpx;

				&.wx-swiper-dot-active {
					width: 40rpx;
				}
			}

			.wx-swiper-dots.wx-swiper-dots-horizontal {
				margin-bottom: 5rpx;
			}

			/* #endif */
		}

		.listR {
			width: 190rpx;
			padding: 18rpx 0;
			margin-right: 20rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.listRt {
				height: 258rpx;

				.slide-image {
					height: 100%;
					border-radius: 25rpx;
				}
			}
		}
	}
</style>
